<template>
    <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            <el-select v-model="value" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            <el-date-picker
                    v-model="value3"
                    type="datetime"
                    placeholder="选择日期时间"
                    :default-time="defaultTime">
            </el-date-picker>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">

        </div></el-col>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        },
        value3: '',
        defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
        name: "search"
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>